---
title: Geri Bildirim
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

İlerlemeyi veya geri sayımı belirtir ve sağdan sola doğru hareket eder.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Özellikler      | Tür     | Açıklama                                                                                                      | Varsayılan |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------- | ---------- |
| süre            | sayı    | İlerleme çubuğunun toplam animasyon süresi milisaniye cinsindendir.                           | 3          |
| gecikme         | sayı    | İlerleme çubuğu animasyonunun başlamasındaki gecikme milisaniye cinsindendir.                 | 0          |
| easing          | metin   | Easing function for the progress bar animation                                                                | easeInOut  |
| çubukYüksekliği | sayı    | Çubuğun piksel cinsinden yüksekliği                                                                           | 24         |
| çubukRengi      | metin   | Çubuğun rengi                                                                                                 | gray80     |
| otomatikBaşlat  | boolean | Eğer `doğru` ise, bileşen montajlandığında ilerleme çubuğu animasyonu otomatik olarak başlar. | `doğru`    |

</Tab>
</Tabs>

## Dairesel İlerleme Çubuğu

Bir görevin ilerlemesini gösterir, genellikle yükleme ekranlarında veya kullanıcılara devam eden işlemleri bildirmek istediğiniz alanlarda kullanılır.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Özellikler     | Tür   | Açıklama                             | Varsayılan   |
| -------------- | ----- | ------------------------------------ | ------------ |
| boyut          | sayı  | Dairesel ilerleme çubuğunun boyutu   | 50           |
| çubukGenişliği | sayı  | İlerleme çubuğu çizgisinin genişliği | 5            |
| çubukRengi     | metin | İlerleme çubuğunun rengi             | currentColor |

</Tab>

</Tabs>
